<template>
	<div class="giftcard-cover GiftCardPopoutstur" v-if="giftcardshow">
		<div class="giftcardmask"></div>
		<div class="giftcardpopout">
			<div class="mask-contant">
				<div class="mask-title">
					<span>{{text}}赠送礼包明细</span>
				</div>
				<div class="mask-box">
					<p class="boxp">购买{{text}}送</p>
					<div class="giveDetails">
						<p v-for="(val,index) in contant"><span class="givegift">{{val.couponName}}</span><span style="float: right;"><em>x</em>{{val.couponNum}}</span></p>
					</div>
				</div>
				<div class="mask-operation">
					<span @click="hideCover">知道了</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapMutations } from "vuex";
	export default {
		props: {
			text: {
				type: String,
				default: ""
			},
			contant: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				giftcardshow:false
			}
		},
		computed: {

		},
		methods: {
			//显示弹框
			showCover(){
				this.giftcardshow = true
			},
			//隐藏弹框
			hideCover() {
				this.giftcardshow = false
			},
		},
		created() {

		},
		mounted() {

		}
	}
</script>

<style>
	.giftcard-cover {
		position: fixed;
		/*left: 240px;*/
		top: 0px;
		height: 100%;
		width: 100%;
		z-index: 99999;
		touch-action: none;
	}

	.giftcard-cover .giftcardmask {
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.7;
	}

	.giftcard-cover .giftcardpopout {
		position: absolute;
		width: 90%;
		left: 50%;
		top: 50%;
		margin: auto;
		background-color: #fff;
		border-radius: 0.5rem;
		transform: translateX(-50%) translateY(-50%);
		/*height: 8.5rem;
		bottom: 0;
		right: 0;*/
	}

	.giftcard-cover .giftcardpopout .mask-contant {
		margin-top: 0.5rem;
	}

	.giftcard-cover .giftcardpopout .mask-contant .mask-title span {
		font-size: 0.8rem;
		color: #333;
	}
    
	.giftcard-cover .giftcardpopout .mask-contant .mask-box {
		text-align: left;
		margin: 0.5rem 1rem;
	}
    .giftcard-cover .giftcardpopout .mask-contant .mask-box .giveDetails{
    	margin-left: 0.75rem;
    	margin: 0rem 0.75rem;
    }
    .giftcard-cover .giftcardpopout .mask-contant .mask-box .giveDetails p{
    	border-bottom: 1px solid #eaeaea;
    	line-height: 1rem;
    	padding-bottom: 0.5rem;
    	padding-top: 0.3rem;
    }
    .giftcard-cover .giftcardpopout .mask-contant .mask-box .giveDetails .givegift{
    	display: inline-block;
    	width: 85%;
    }
	.giftcard-cover .giftcardpopout .mask-contant .mask-box .boxp {
		color: #000;
		font-weight: bold;
		margin-bottom: 0.5rem;
		font-size: 0.75rem;
	}

	.GiftCardPopoutstur.giftcard-cover .giftcardpopout .mask-contant .mask-operation {
		height: 3rem;
		line-height: 3rem;
		color: #fff;
		margin: 0rem 1rem;
		border: none;
	}

	.GiftCardPopoutstur.giftcard-cover .giftcardpopout .mask-contant .mask-operation span {
		display: inline-block;
		height: 2rem;
		line-height: 2rem;
		width: 100%;
		background-color: #3AB537;
		border-radius: 0.3rem;
	}
</style>
